<template>
	<view>
		<view class="ali_my_h" @click="toAuthorization()">
			<image src="https://offline.hntgov.net/file/UploadFile/Image/2021-05-12/moren.png" class="my_h_image">
			</image>
			<!-- <text class="my_h_name">用户</text> -->
			<text class="my_h_name">{{phone||'未登录'}}</text>
		</view>
		<view class="my_jjjj">
			<view
				style="width: 630rpx;height: 92rpx;border-bottom: #E7E6E6 2rpx solid;display: flex;align-items: center;position: relative;margin-left: 30rpx;">
				<text
					style="color: #3D3D3D;font-size: 30rpx;font-weight: bold;position: absolute;left: 10rpx;">订单信息</text>
				<text style="color: #696969;font-size: 26rpx;position: absolute;right: 10rpx;"
					@click="toOrderList(0)">全部订单<u-icon name="arrow-right"
						style="margin-left: 10rpx;"></u-icon></text>
			</view>
			<view class="my_iiij">
				<view @click="toOrderList(1)">
					<image src="https://aliyunoss.hntgov.net/h5/my_dfk.png"></image>
					<text>待支付</text>
				</view>
				<view @click="toOrderList(2)">
					<image src="https://aliyunoss.hntgov.net/h5/my_dfh.png"></image>
					<text>待发货</text>
				</view>
				<view @click="toOrderList(3)">
					<image src="https://aliyunoss.hntgov.net/h5/my_dsh.png"></image>
					<text>已发货</text>
				</view>
				<view @click="toOrderList(4)">
					<image src="https://aliyunoss.hntgov.net/h5/my_ywc.png"></image>
					<text>已完成</text>
				</view>
				<!-- <view @click="toAfterSale()">
					<image src="https://aliyunoss.hntgov.net/h5/my_sh.png"></image>
					<text>退款/售后</text>
				</view> -->
			</view>
			<view style="width: inherit;height: 20rpx;background-color: #F8F8F8;"></view>
			<view class="my_iiij">
				<view @click="makePhone()">
					<image src="https://aliyunoss.hntgov.net/h5/w_lxkf.png"></image>
					<text>联系客服</text>
				</view>
				<view @click="toCouponList()" style="color: #fff;">
					<image src="https://aliyunoss.hntgov.net/h5/w_wdyhq.png"></image>
					<text>优惠券</text>
				</view>
				<view style="color: #fff;">
					<!-- <image src="https://aliyunoss.hntgov.net/h5/w_wdzj.png"></image>
					<text>我的足迹</text> -->
				</view>
			
				<view style="color: #fff;">
					<!-- <image src="https://aliyunoss.hntgov.net/h5/w_cylxr.png"></image>
					<text>常用联系人</text> -->
				</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" width='552' height='448' border-radius='24'>
			<view
				style="color: #4A4949;font-size: 32rpx;font-weight: bold;width: 552rpx;text-align: center;padding-top: 24rpx;">
				客服电话</view>
			<view
				style="display: flex;flex-direction:column;gap: 46rpx;padding-left: 36rpx;padding-right: 36rpx;margin-top: 48rpx;">
				<view style="color: #929292;font-size: 24rpx;"><text style="color: #4A4949;">客服电话：</text>0731-88912301
				</view>
				<view style="color: #929292;font-size: 24rpx;"><text style="color: #4A4949;">在线时间：</text>08:30-17:30
				</view>
				<view style="color: #929292;font-size: 24rpx;">温馨提示：请在客服在线时间内拨打，谢谢！</view>
			</view>
			<view class="ali_my_hhh"><u-button :custom-style="customStyle" shape="circle"
					size="mini">取消</u-button><u-button :custom-style="customStyle" shape="circle" size="mini"
					type="primary">确认</u-button></view>
		</u-popup>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					width: '220rpx',
					height: '68rpx'
				},
				show: false,
				phone: ''
			}
		},
		onLoad() {},
		onShow() {
			this.phone = uni.getStorageSync('phone')
		},
		methods: {
			makePhone() {
				uni.makePhoneCall({
					phoneNumber: '0731-88912301'
				})
			},
			toCouponList(){
				uni.navigateTo({
					url: '/pages/index/couponlist'
				})
			},
			toAppoint() {
				uni.navigateTo({
					url: '/pages/card/record'
				})
			},
			toOrderList(e) {
				if (this.phone) {
					uni.navigateTo({
						url: '/pages/order/orderlist?index=' + e
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请先登录'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages/index/authorization'
						})
					},1000)
					
				}

			},
			toAfterSale() {
				uni.navigateTo({
					url: '/pages/order/aftersale'
				})
			},
			toFoot() {
				uni.navigateTo({
					url: '/pages/index/foot'
				})
			},
			toAuthorization() {
				if (!this.phone) {
					uni.navigateTo({
						url: '/pages/index/authorization'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '已经登录'
					})
				}

			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}
</style>
<style scoped>
	.ali_my_h {
		width: 750rpx;
		height: 428rpx;
		background: linear-gradient(93deg, #E0F2F6 1%, #D5E9FA 101%);
		border-radius: 0% 0% 100% 100% / 33% 33% 7% 7%;
	}
</style>
<style scoped lang="less">
	.ali_my_hhh {
		width: 552rpx;
		padding-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40rpx;
	}

	.my_h_image {
		width: 106rpx;
		height: 106rpx;
		border-radius: 53rpx;
		border: 5rpx #fff solid;
		position: absolute;
		top: 190rpx;
		left: 60rpx;
	}

	.my_h_name {
		font-size: 32rpx;
		color: #3D3D3D;
		position: absolute;
		top: 232rpx;
		left: 204rpx;
		font-weight: bold;
	}

	.my_h_phone {
		font-size: 24rpx;
		color: #727272;
		position: absolute;
		top: 262rpx;
		left: 204rpx;
	}

	.my_jjjj {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: -20rpx;
		display: flex;
		flex-direction: column;
	}

	.my_iiij {
		width: 630rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;

		view {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 68rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}

			text {
				color: #606060;
				font-size: 26rpx;
			}
		}
	}

	button {
		border: none;
		margin-left: 0rpx;
		padding: 0rpx !important;
		margin-right: 0rpx;
	}

	button::after {
		border: none;
		padding: 0rpx !important;
	}

	.testbutton1 {
		align-items: center;
		display: flex;
		border: none;
		color: #FFFFFF;
		margin-left: 66rpx;
		width: 106rpx;
		height: 106rpx;
		border-radius: 53rpx;
		padding: 0rpx;
	}

	.my_iiii {
		width: 630rpx;
		margin-left: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-top: 20rpx;
		display: flex;

		justify-content: center;

		view {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 68rpx;
				height: 60rpx;
				margin-bottom: 16rpx;
			}

			text {
				color: #606060;
				font-size: 26rpx;
			}
		}
	}
</style>